<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/static/css/404.css" />
	<script src="/static/js/jquery2.js"></script>
    <title>Document</title>
    <style>
        html {
            height: 100%;
            overflow: hidden;
        }
        body {
            background: #7fdcec;
            font-family: "Varela", sans-serif;
            height: calc(100%);
            overflow: auto;
            position: relative;
        }
        .func{
            height: 175px;
            width: 175px;
            text-align: center;
            background-color: rgba(0,0,0,0.3);
            line-height: 175px;

            transition-duration: 500ms;
            transition-property: transform,background-color;
        }
        .func:hover{
            transform: translateY(-20px);
            background-color: white;    
        }
        #user {
            text-align: right;
            border: none;
            position: absolute;
            right: 7%;
            top: 3%;
            z-index: 2;
        }
        #user ul {
            padding: 0px;
        }
        #user li {
            list-style: none;
            padding: 4%;
        }
        #exit{
            background-color: rgba(0,0,0,0);
            border: none;
            position: absolute;
            right: 3%;
            top: 4%;
            z-index: 2;
        }

        #exit:hover {
            text-decoration-color: black;
            text-decoration-line: underline;
            text-decoration-thickness: 2px;
            text-decoration-style: solid;
        }
    </style>
</head>
<body>
    <div id="tsparticles"></div>
    <div id="inf" style="display: none;">
        <div id="user" onmouseover="staff_show()">
            <img src="/static/image/用户.jpg" width="30px">
            <div style="display: none;">
                <ul>
                    <li>用户名：</li>
                    <li>电话号码：</li>
                    <li>邮箱：</li>
                </ul>
            </div>
        </div>
        <button id="exit" type="button" onclick="exit()">退出</button>     
    </div>
    <div style="text-align: center;height: 200px;line-height: 200px;">
        <h1>欢迎！稍微做点什么吧</h1>
    </div>
    <div id="nologin" style="display: none;
        justify-content: space-evenly;">
        <div class="func">
            <a href="/login">登录</a>
        </div>
        <div class="func">
            <a href="/register">注册</a>
        </div>
    </div>
    <div id="logined" style="display: none;
        justify-content: space-evenly;">
        <div class="func">
            <a href="/chart">数据实时监测页</a>
        </div>
        <div class="func">
            <a href="/excel?q=device">设备总体数据展示页</a>
        </div>
        <div class="func">
            <a href="/excel?q=alarm">异常数据展示页</a>
        </div>
        <div class="func">
            <a href="/excel?q=staff">人员信息页</a>
        </div>
    </div>
    <script src="/static/js/tsparticles_min.js"></script>
    <script src="/static/js/404.js"></script>
    <script src="/static/js/index.js"></script>
    <script>
        // 将上述操作整合
        function total(){
            if (document.cookie){
                let ele_inf = document.getElementById("inf");
                let ele_logined = document.getElementById("logined");
                ele_inf.style.display = "block";
                ele_logined.style.display = "flex";
                nav_show();

                let h1 = document.getElementsByTagName("h1")[0];
                let ar = [...h1.textContent];
                ar.splice(2,0,window.staffinf[1]);
                h1.textContent = ar.join("");
            } else{
                let ele_nologin = document.getElementById("nologin");
                ele_nologin.style.display = "flex";
            }
        }
        setTimeout(total, 1000);
    </script>
</body>
</html>